import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import menuRoute from 'routes/menuRoute'
import { Tabs } from 'antd'
import { setPayWorkbench } from 'actions/cache';
import PayUnpaid from 'containers/pay/pay-workbench/pay-unpaid'
import PayPaying from 'containers/pay/pay-workbench/pay-paying'
import PayFail from 'containers/pay/pay-workbench/pay-fail'
import PaySuccess from 'containers/pay/pay-workbench/pay-success'
import 'styles/pay/pay-workbench/pay-workbench.scss'
const TabPane = Tabs.TabPane;

class PayWorkbench extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      nowStatus: 'Unpaid',
      tabs: [
        {key: 'Unpaid', name:messages('pay.key103'/*未支付*/)},
        {key: 'Paying', name:messages('pay.key62'/*支付中*/)},
        {key: 'Fail', name:messages('pay.key36'/*退票或失败*/)},
        {key: 'Success', name:messages('pay.key66'/*支付成功*/)}
      ],
      payWorkbench:  menuRoute.getRouteItem('pay-workbench','key'),    //付款工作台
    }
  }


  componentWillMount(){
    const { payWorkbench } = this.props;
    if(Object.keys(payWorkbench).length)
      this.setState({nowStatus: payWorkbench.tab})
  }

  onChangeTabs = (key) => {
    this.setState({ nowStatus: key }, () => {
      this.props.dispatch(setPayWorkbench({tab: key, subTab: undefined}));
      this.context.router.replace(`${this.state.payWorkbench.url}?tab=${this.state.nowStatus}`);
    })
  };

  renderContent = () => {
    let content = null;
    const { payWorkbench } = this.props;
    switch (this.state.nowStatus){
      case 'Unpaid':
        content = <PayUnpaid subTab={payWorkbench.subTab}/>;
        break;
      case 'Paying':
        content = <PayPaying subTab={payWorkbench.subTab}/>;
        break;
      case 'Fail':
        content = <PayFail subTab={payWorkbench.subTab}/>;
        break;
      case 'Success':
        content = <PaySuccess subTab={payWorkbench.subTab}/>;
        break;
    }
    return content;
  };

  render(){
    const { tabs, nowStatus } = this.state;
    return (
      <div className="pay-workbench">
        <Tabs onChange={this.onChangeTabs} defaultActiveKey={nowStatus}>
          {tabs.map(tab => {
            return <TabPane tab={tab.name} key={tab.key}/>
          })}
        </Tabs>
        {this.renderContent()}
      </div>
    )
  }

}

PayWorkbench.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    payWorkbench: state.cache.payWorkbench
  }
}

export default connect(mapStateToProps)(PayWorkbench);
